<script lang="ts" setup>
import Aside from '@/components/Aside/Aside.vue'
import CompAttr from '@/components/CompAttr/CompAttr.vue'
import CourseCategoryModal from '@/components/CourseCategoryModal/CourseCategoryModal.vue'
import Designer from '@/components/Designer/Designer.vue'
import IconSelectModal from '@/components/IconSelectModal/IconSelectModal.vue'
import { createImgCropContext, ImgCropModal } from '@/components/img-crop-modal'
import JumpLinkModal from '@/components/JumpLinkModal/JumpLinkModal.vue'
import NavBar from '@/components/NavBar/NavBar.vue'
import Preview from '@/components/Preview/Preview.vue'
import { useCompRefs } from '@/hooks/useCompRefs'

const { JumpLinkModalRef, IconSelectModalRef, VideoPreviewModalRef, CourseCategoryModalRef } = useCompRefs()
const { imgCropModalRef } = createImgCropContext()
</script>

<template>
  <div class="box-border">
    <NavBar />
    <Aside />
    <Designer />
    <CompAttr />
    <Preview />
    <JumpLinkModal ref="JumpLinkModalRef" />
    <IconSelectModal ref="IconSelectModalRef" />
    <VideoPreviewModal ref="VideoPreviewModalRef" />
    <CourseCategoryModal ref="CourseCategoryModalRef" />
    <ImgCropModal ref="imgCropModalRef" />
  </div>
</template>

<style lang="less">
.ant-radio-wrapper {
  &:hover .ant-radio + span,
  .ant-radio.ant-radio-checked + span {
    color: var(--app-color-primary);
  }
  &:last-child {
    margin-inline-end: 0;
    margin-right: 0;
  }
}
</style>
